<template>
  <div>
    home 子组件
    <input type="text" ref="iptRef" />
    <div ref="divRef" id="555"></div>
    <button @click="getdiv">获取dom节点</button>
    <hr>
    <cars-view ref="carRef"></cars-view>
  </div>
</template>
<script setup>
import { ref } from "vue";
import CarsView from "@/components/home/CarsView.vue"
// ref获取dom节点
// 1、ref获取dom节点
//    1、创建ref   let iptRef = ref(null);
//    2、模板中建立关联    <input type="text" ref="iptRef" />
//    3、通过iptRef.value 获取dom节点
// 2、ref可以获取组件实例   只能获取组件实例中用defineExpose暴露出来的数据和方法

let iptRef = ref(null);
let divRef = ref(null);
let carRef = ref(null)

console.log(iptRef.value);

function getdiv() {
  console.log(divRef.value);
  console.log(divRef.value.id);
  divRef.value.innerText="9999999999999999999"
  console.log(iptRef.value);

  console.log(carRef.value) //获取组件实例
  console.log(carRef.value.num)  //获取组件实例中使用defineExpose暴露出来的数据
  carRef.value.fn1()  //调用组件实例的方法
}
</script>
